<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>fullPage - Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="fullPage:For desktop(ie5.5+) or mobile webApp without jQuery,create full screen pages fast and simple.">
    <meta name="keywords" content="fullPage,webApp,full screen">
    <meta name="author" content="Chriswang,396276123@qq.com">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<!--[if lte IE 7]>      
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->
<div class="nav">
	<h1>
		<a href="https://github.com/powy1993/fullpage">
			<img src="images/logo.jpg" class="logo" alt=""><p>fullPage - Github:https://github.com/powy1993</p>
			<span>Fork me on Github!</span>
		</a>
	</h1>
    <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">VIEW</a></li>
        <li><a href="#">CASE</a></li>
        <li><a href="#">SERVICE</a></li>
        <li><a href="#">HOME</a></li>
    </ul>
</div>
	<div id="article">
		
		<div class="page section1 current">
			<div class="contain">
				<div id="pageContain">
		
				<div class="page page1 current">
					<div class="contain">
						<h3 class="title">整屏切换组件</h3>
						<h4 class="titleEng">fullPage</h4>
						<img src="images/a2.png" alt="HTML,CSS" class="page1-box">
						<p>使用CSS3动画以及降级处理，兼容到ie6。</p>
					</div>
				</div>

				<div class="page page2">
					<div class="contain">
						<h3 class="title">这是轮播第二部分</h3>
						<h4 class="titleEng">This is 1-2</h4>
						<img src="images/a10.png" alt="可视化数据" class="page2-box">
					</div>
				</div>

				<div class="page page3">
					<div class="contain">
						<h3 class="title">可以随意地添加动画</h3>
						<h4 class="titleEng">could use animation(CSS3)</h4>
						<img src="images/a13.png" alt="影视制作" class="page3-box">
					</div>
					<div class="scTop"></div>
					<div class="scBottom"></div>
				</div>

				<div class="page page4">
					<div class="contain">
						<h3 class="title">支持手机端触摸</h3>
						<h4 class="titleEng">Touch it!</h4>
						<div class="page4-box">
							<img src="images/a5.png" alt="微信">
						</div>
					</div>
				</div>
			</div>
			<ul id="navBar">
				<li></li>
				<li></li>
				<li></li>
 				<li></li>
			</ul>

    			<div id="prev">&lt;</div>
    			<div id="next">&gt;</div>
			</div>
		</div>

		<div class="page section2">
			<div class="contain">
				<h3 class="title">这里是第二竖屏</h3>
				<h4 class="titleEng">This is section2</h4>
			</div>
		</div>

		<div class="page section3">
			<div class="contain">
				<h3 class="title">这里是第三竖屏</h3>
				<h4 class="titleEng">This is section3</h4>
			</div>
		</div>

		<div class="page section4">
			<div class="contain">
				<h3 class="title">这里是第四竖屏</h3>
				<h4 class="titleEng">This is section4</h4>
			</div>
		</div>
	</div>
<script type="text/javascript" src="js/fullPage.min.js"></script>
<script type="text/javascript">
	
var runPage,
	runPage2,
    interval,
    autoPlay;

autoPlay = function(to) {

    clearTimeout(interval);
    interval = setTimeout(function() {
        runPage.go(to);
    }, 5000);

}

runPage = new FullPage({

	id : 'pageContain',                            // id of contain
	slideTime : 1000,                               // time of slide
    effect : {                                     // slide effect
        transform : {
        	translate : 'X',					   // 'X'|'Y'|'XY'|'none'
        	scale : [0, 1],					   // [scalefrom, scaleto]
        	rotate : [60, 0]					   // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
	mode : 'touch,nav:navBar',               // mode of fullpage
	easing : [0, .93, .39, .98],                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1] )
    callback : function(index, thisPage) {     // callback when pageChange

        index = index + 1 > 3 ? 0 : index + 1;
        autoPlay(index);
    }
});

runSection = new FullPage({

	id : 'article',                            // id of contain
	slideTime : 800,                               // time of slide
    effect : {                                     // slide effect
        transform : {
        	translate : 'Y',					   // 'X'|'Y'|'XY'|'none'
        	scale : [0, 1],					   // [scalefrom, scaleto]
        	rotate : [0, 0]					   // [rotatefrom, rotateto]
        },
        opacity : [0, 1]                           // [opacityfrom, opacityto]
    },                           
	mode : 'touch,wheel',               // mode of fullpage
	easing : [0, .93, .39, .98],
	callback : function(index, thisPage) {     // callback when pageChange

        if (index === 0) {
        	autoPlay(runPage.thisPage() + 1);
        } else {
        	clearTimeout(interval);
        }
    }
});

interval = setTimeout(function() {
    runPage.go(runPage.thisPage() + 1);
}, 5000);

</script>

<script type="text/javascript">
    
    var prev = document.getElementById('prev'),
        next = document.getElementById('next');
    
    prev.onclick = function() {
        runPage.go(runPage.thisPage() - 1);
    }
    next.onclick = function() {
        runPage.go(runPage.thisPage() + 1);
    }

</script>


	<!--[if lte IE 6]>
	<script type="text/javascript" src="http://mat1.gtimg.com/cd/201108/app/DD_belatedPNG_0.0.8a.js" charset="utf-8"></script>
	<script type="text/javascript">
	DD_belatedPNG.fix("*");
	</script>
	<![endif]--> 

</body>
</html>
